<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">
			
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.p043}}
				</view>
				<view class="flex-1">
				</view>
			</view>
			<view class="selectWrap py-3 pl-3 flex align-center" :class="model=='light'?'selectWrapLight':''">
				<view @click="open1" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p016}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view @click="open2" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p017}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view @click="open3" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n2.m002}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<template v-for="(item,index) in orderList">
			<qqjlList :djs="item.djs" :item="item"></qqjlList>
		</template>
		<view class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n.p023}}～
		</view>
		<sjPoup ref="sjPoup" @confirm="confirm2"></sjPoup>
		<bzPoup :type="3" ref="bzPoup" @confirm="confirm1"></bzPoup>
		<ztPoup :type="9" ref="ztPoup" @confirm="confirm3"></ztPoup>
	</view>
</template>

<script>
	import {
		optionsList
	} from '@/core/api/index.js';
	import qqjlList from '@/components/qqjlList.vue';
	import bzPoup from '@/components/bzPoup.vue';
	import sjPoup from '@/components/sjPoup.vue';
	import ztPoup from '@/components/ztPoup.vue';
	export default{
		components:{
			qqjlList,
			bzPoup,
			sjPoup,
			ztPoup
		},
		data(){
			return {
				pageNo:1,
				pageSize:10,
				orderList:[],
				// orderType:'',
				coinType:'',
				bullishBearish:'',
				startDate:'',
				endDate:'',
				isOpen1:false,
				isOpen2:false,
				isOpen3:false,
				isCangetList:false,
				timer:null,
			}
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('mine2');
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onLoad() {
			this.getList();
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		methods:{
			open1() {
				this.closePopup(1);
				if(this.isOpen1){
					this.closePopup(4);
				}else{
					this.$refs.bzPoup.open();
				}
				this.isOpen1 = !this.isOpen1;
			},
			open2() {
				this.closePopup(2);
				if(this.isOpen2){
					this.closePopup(4);
				}else{
					this.$refs.sjPoup.open();
				}
				this.isOpen2 = !this.isOpen2;
			},
			open3() {
				this.closePopup(3);
				if(this.isOpen3){
					this.closePopup(4);
				}else{
					this.$refs.ztPoup.open();
				}
				this.isOpen3 = !this.isOpen3;
			},
			getList() {
				optionsList({
					// pageNo: this.pageNo,
					mobileUserId: uni.getStorageSync('mobileUserId'), //客户id
					// pageSize: this.pageSize,
					coinType: this.coinType, //币种
					optionsOrderStatus:'', //状态
					bullishBearish: this.bullishBearish, //看涨 看跌 看单 看双
					startDate:this.startDate,
					endDate:this.endDate
				}).then(res => {
					console.log(res,'cs');
					let list = res.result;
					// if (this.pageNo == 1) {
					// 	this.orderList = list;
					// } else {
					// 	if (list.length == 0) {
					// 		this.pageNo--;
					// 	} else {
					// 		this.orderList.push(list);
					// 	}
					// }
					this.orderList = list;
					this.isCangetList = true;
					this.changeOrderInfo();
				})
			},
			changeOrderInfo() {
				for (let i = 0; i < this.orderList.length; i++) {
					if(this.orderList[i].optionsOrderStatus==0){
						this.orderList[i].djs = this.getFinishTime(this.orderList[i].settlementTimeEnd);
					}
				}
				this.timer = null;
				clearInterval(this.timer);
				this.timer = setInterval(e => {
					for (let i = 0; i < this.orderList.length; i++) {
						if(this.orderList[i].optionsOrderStatus==0){
							this.orderList[i].djs = this.getFinishTime(this.orderList[i].settlementTimeEnd);
						}
					}
					this.$forceUpdate();
				}, 1000)
			},
			getFinishTime(e) {
				const orderCreationTime = new Date(e);
				const now = new Date();
				const diffMilliseconds = orderCreationTime - now;
			
				if (diffMilliseconds <= 0) {
					if(this.isCangetList){
						// this.pageNo=1;
						this.getList();
					}
					this.isCangetList = false;
					return '00:00:00';
				}
				const hours = Math.floor(diffMilliseconds / (1000 * 60 * 60));
				const minutes = Math.floor((diffMilliseconds % (1000 * 60 * 60)) / (1000 * 60));
				const seconds = Math.floor((diffMilliseconds % (1000 * 60)) / 1000);
				console.log(String(hours).padStart(2,'0') +':'+ String(minutes).padStart(2,'0') +':'+ String(seconds).padStart(2,'0'));
				return String(hours).padStart(2,'0') +':'+ String(minutes).padStart(2,'0') +':'+ String(seconds).padStart(2,'0');
				// console.log(`剩余可取消订单时间: ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`);
			},
			closePopup(e) {
				if (e != 1) {
					this.$refs.bzPoup.closePopup();
				}
				if (e != 2) {
					this.$refs.sjPoup.closePopup();
				}
				if (e != 3) {
					this.$refs.ztPoup.closePopup();
				}
			},
			confirm1(e) {
				this.coinType = e.value;
				this.getList();
			},
			confirm2(e) {
				this.startDate = e.startDate;
				this.endDate = e.endDate;
				this.getList();
			},
			confirm3(e) {
				this.bullishBearish = e.value;
				this.getList();
			},
		}
	}
</script>

<style scoped lang="scss">
	.selectWrap {
		background: #0E0F11;
		.title {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}
		.titleLight {
			color: #0E0F11;
		}
	}
	.selectWrapLight {
		background: #E6E8EF;
	}
</style>